<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root"></div>

    <script src="../lib/react.js"></script>
    <script src="../lib/react-dom.js"></script>
    <script src="../lib/babel.js"></script>

    <script type="text/babel">
        // let message = "Hello World"
        // function btnClick(){
        //     console.log("btnClick");
        //     message = "Hello react"
        //     rootRender()
        // }
    // const root = ReactDOM.createRoot(document.querySelector("#root"))
    // function rootRender(){
    //     root.render(
    //     <div>
    //         <h2>{message}</h2>
    //         <button onClick={btnClick}> 修改</button>
    //     </div>
    //     )
    // }
    // rootRender()
    // 使用组件进行重构代码
    // 类组件和函数式组件

    class App extends React.Component {
        // 组件数据
        constructor(){
            super()
            this.state={
                title:"哈哈",
                imgUrl:"https://image9.cdn.haiyiai.com/static/0f089a3bcf38d052f7882d12b3923a82/20230226/2070e99e20c77fb8da8b3e5bd757afcf.png",
                href:"https://www.baidu.com",
                isActive: true,
                styleEl:{color:"red",fonSize:"30px"}
            }

            // 对需要绑定的方法，提前绑定好this

        }
        // 组件方法 (实例方法)
       
        // 渲染内容  render方法
        render(){
            const {title,imgUrl,href,isActive,styleEl } = this.state
            // 1.class 绑定写法1： 字符串的拼接
            const className = `abc acb ${isActive ? 'active' :''}`
            // 2.class 绑定写法2： 将所有的class 放到数组中

            const classList= ['abc','cab']
            if(isActive) classList.push("active")

            // 3.class 绑定写法3： 第三方库classnames -> npm install classnames

            return (
                <div>
                    {/* 1.基本绑定 */}
                    <h2 title={title}>h2元素</h2>
                    <img src={imgUrl} alt="" />
                    <a href={href}>百度一下</a>
                    {/* 2.class绑定 className */}
                    <div className={className}></div>
                    <div className={classList.join(" ")}></div>

                    {/* 3. 绑定style属性：绑定对象类型 */}
                    <h2 style={{color:'red',fonSize:'30px'}}>呵呵呵</h2>
                    <h2 style={styleEl}>呵呵呵</h2>
                </div>
            )
        }
    }

    // 将组件渲染到界面上
    const root = ReactDOM.createRoot(document.querySelector("#root"))
    root.render(<App/>)
    </script>
</body>
</html>